<template>
    <div class="all">
        <section class="center">
            <a-tabs  tabPosition="left">
                <a-tab-pane key="1" tab="我的主页">
                    <h1>个人信息</h1>
                    <ul>
                        <li><p>昵称<sub>修改</sub></p>
                        <p>{{userList.nickname}}</p></li>
                        <li><p>
                            手机号<sub>修改</sub>
                        </p><p>
                            {{userList.mobile}}
                        </p></li>
                        <li>
                            <p>密码<sub>修改</sub></p>
                            <p>{{userList.password}}</p>
                        </li>
                    </ul>
                    <a-upload
                            name="file"
                            :multiple="true"
                            action="/course-api/pcUser/updata/userAvatar"
                            :headers="headers"
                            @change="handleChange"
                    >
                        <a-button> <a-icon type="upload" /> 更换头像 </a-button>
                    </a-upload>
                    <img :src="avatarUrl" alt="">
                    <input ref="avatar" @change="change" type="file" value="haha">
                </a-tab-pane>
                <a-tab-pane key="2" tab="我的课程">
                    Content of tab 2
                </a-tab-pane>
                <a-tab-pane key="3" tab="我的订单">
                    Content of tab 3
                </a-tab-pane>

            </a-tabs>
        </section>

    </div>
</template>

<script>

    import {getUserInfo,changeAvatar} from "../api/api";
    export default {
        name: "Mine",
        data() {
            return {
                headers: {
                    authorization: 'authorization-text',
                },
                avatarUrl:'',
                userInfo:'',
                userList:''
            };
        },
        methods: {
            handleChange(info) {
                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (info.file.status === 'done') {

                    this.$message.success(`${info.file.name} file uploaded successfully`);
                    console.log(info.file.response.userInfo)
                    this.userInfo =info.file.response.userInfo
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            },
            // 如何获取文件  获取到之后如何上传
            change(){
                // console.dir(this.$refs.avatar)
                // console.dir(this.$refs.avatar.files[0])
                changeAvatar(this.$refs.avatar.files[0]).then(res=>{
                    console.log(res)
                    if(res.code ==0){
                        this.userInfo =res.userInfo
                    }
                })
            }
        },
        created(){
            getUserInfo().then(res => {
                // console.log(res)
                this.userList = res.data.userInfo
                this.avatarUrl = res.data.userInfo.avatarUrl

            })
        }

    }

</script>

<style scoped>
    .all{
        padding: 20px 0;
        background-color: #eee;

    }
    .center{
        margin: auto;
    padding: 16px 24px;
        width: 1200px;
        height: 800px;
        background-color: white;

    }
    .ant-tabs{
        height: 100%;
    }
    img{
        width: 200px;
        height: 200px;
    }
    ul>li{
        border-bottom: 1px solid black;
    }
    sub{
        color: #00cf8c;
    }
    >>>.img{
        width: 50%;
    }
    >>>.headerTop>section>.courseNav{
        width: 50%;
    }
</style>